<template>
  <el-container>
    <el-header>
      <div class="header">
        <img src="../assets/u27.png" alt />
        <h2 class="cache1">老师管理/</h2>
        <h2 class="cache2">老师详情</h2>
      </div>
      <div class="header-r">
        <i class="el-icon-mobile-phone">下载中心</i>
        <i class="el-icon-user">{{this.$store.state.loginName}}</i>
      </div>
    </el-header>
    <el-main>
      <div class="content">
        <img src="../assets/u2432.png" alt />
        <div class="info">
          <div class="info-t">
            <h2>张林老师</h2>
            <div class="tag">
              <img src="../assets/u1752.png" alt />
              <div class="tag-span">
                <span type="danger">专业度高</span>
              </div>
              <div class="tag-span">
                <span type="danger">幽默风趣</span>
              </div>
              <div class="tag-span">
                <span type="danger">美丽大方</span>
              </div>
            </div>
          </div>
          <div class="info-b">
            <h3>
              所属校区：
              <span>宝安校区</span>
            </h3>
            <h3>
              科目：
              <span>芭蕾舞</span>
            </h3>
            <h3>
              教龄：
              <span>3年</span>
            </h3>
          </div>
        </div>
        <div class="editor">编辑老师</div>
      </div>
      <div class="content-footer">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="老师简介" name="first">
              <div class="teacherInfo">
                <h2>教育经历</h2>
                <p>这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历这是教育经历</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程介绍" name="second">
              <div class="teacherInfo">
                <h2>课程介绍</h2>
                <p>课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="老师课表" name="third">
              <div class="teacherInfo">
                <h2>老师课表</h2>
                <p>老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表老师课表</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评价" name="fourth">
              <div class="teacherInfo">
                <h2>教育经历</h2>
                <p>教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历教育经历</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "education-item1-m2",
  data() {
    return {
      activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.header-r {
  height: 65px;
  width: 300px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.header {
  border-width: 0px;
  width: 1100px;
  height: 65px;
}
.header img {
  float: left;
  border-width: 0px;
  margin: 20px 15px;
  width: 20px;
  height: 15px;
}
.header-r .el-icon-user {
  padding-top: 30px;
  margin-left: 40px;
  margin-right: 20px;
}
.header .cache1 {
  float: left;
  border-width: 0px;
  margin: 18px 5px 0 5px;
  word-wrap: break-word;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}
.header .cache2 {
  float: left;
  border-width: 0px;
  height: 50px;
  margin: 18px 15px 5px 0;
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}

.header h2:hover {
  color: skyblue;
}

.el-main .content-footer {
  position: absolute;
  top: 350px;
}
.content {
  border-width: 0px;
  width: 1225px;
  height: 265px;
  font-family: "ArialMT", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
  text-align: center;
  line-height: normal;
}
.content img {
  border-width: 0px;
  float: left;
  width: 153px;
  height: 199px;
  margin: 5px 0 0 10px;
}
.content .info {
  float: left;
  width: 800px;
  border-width: 0px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.847058823529412);
}
.content .info .info-t {
  display: flex;
  width: 800px;
  margin: 10px;
}
.content .info .info-t h2 {
  flex: 1;
  width: 50px;
  font-size: 20px;
  padding: 10px 5px 0 20px;
  text-align: left;
}
.content .info .info-t .tag {
  flex: 3;
}
.content .info .info-t .tag img {
  width: 24px;
  height: 25px;
}
.content .info .info-t .tag .tag-span {
  margin: 5px 5px !important;
  float: left;
  width: 88px;
  height: 30px;
  font-size: 14px;
  border: 1px solid;
  border-color: rgba(255, 0, 0, 1);
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  text-align: center;
  font-style: normal;
  line-height: 30px;
  border-radius: 5px;
}
.content .info-b {
  padding-left: 30px;
  width: 600px;
}
.content .info-b h3 {
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.847058823529412);
  line-height: 22px;
  text-align: left;
  padding: 8px;
}
.content .editor {
  cursor: pointer;
  border-width: 0px;
  float: left;
  width: 89px;
  height: 32px;
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #ffffff;
  line-height: 22px;
  background-color: rgba(255, 0, 0, 1);
  border: none;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
}
.el-tabs__content {
  width: 70% !important;
}
.el-tabs__content h2 {
  font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.847058823529412);
  line-height: 22px;
}
</style>


